<template>
  <el-main>
    <div class="bbx">
      <div id="box"></div>
      <div id="box1"></div>
      <div id="box2"></div>
      <div id="box3"></div>
    </div>
    <div class="boxI">
      <div id="bbx1"></div>
      <div id="bbx2"></div>
    </div>
  </el-main>
</template>
<style lang="less" scoped>
.el-main {
  position: absolute;
  width: 100%;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  .bbx {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: space-between;
    #box {
      width: 274px;
      background-color: #b4dce7;
      border-radius: 8%;
      // margin-right: 10px;
    }

    #box1 {
      width: 274px;
      background-color: #b4dce7;
      border-radius: 8%;

      // margin-right: 10px;
    }

    #box2 {
      width: 274px;
      background-color: #b4dce7;
      border-radius: 8%;

      // margin-right: 10px;
    }

    #box3 {
      width: 274px;
      background-color: #b4dce7;
      border-radius: 8%;

      // margin-right: 10px;
    }
  }

  .boxI {
    width: 100%;
    height: 340px;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;

    #bbx1 {
      width: 558px;
      background-color: #b4dce7;
    }

    #bbx2 {
      width: 558px;
      background-color: #b4dce7;
      margin-left: 10px;
    }
  }
}
</style>

<script lang="ts" setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
onMounted(() => {
  var myChart = echarts.init(document.getElementById("box") as HTMLElement);
  // 绘制图表
  myChart.setOption({
    title: {
      text: "2019",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      data: ["Email"],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"],
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "Email",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [120, 101, 134, 100, 230, 210, 220, 230, 200, 210, 235],
      },
    ],
  });
});
onMounted(() => {
  var myChart = echarts.init(document.getElementById("box1") as HTMLElement);
  // 绘制图表
  myChart.setOption({
    title: {
      text: "2020",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      data: ["Email"],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"],
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "Email",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [220, 211, 234, 200, 230, 210, 190, 200, 180, 200, 225],
      },
    ],
  });
});
onMounted(() => {
  var myChart = echarts.init(document.getElementById("box2") as HTMLElement);
  // 绘制图表
  myChart.setOption({
    title: {
      text: "2020",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      data: ["Email"],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"],
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "Email",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [220, 201, 234, 220, 230, 180, 200, 230, 200, 210, 195],
      },
    ],
  });
});
onMounted(() => {
  var myChart = echarts.init(document.getElementById("box3") as HTMLElement);
  // 绘制图表
  myChart.setOption({
    title: {
      text: "2021",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      data: ["Email"],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"],
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "Email",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [320, 301, 334, 300, 330, 310, 320, 330, 300, 310, 335],
      },
    ],
  });
});
//下面是左边的柱状图.
onMounted(() => {
  var myChart = echarts.init(document.getElementById("bbx1") as HTMLElement);
  // 绘制图表
  myChart.setOption({
    title: {
      text: "2022年经营明细",
    },
    xAxis: {
      type: "category",
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
      ],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [
          {
            value: 30,
            itemStyle: {
              color: "#1402FC",
            },
          },
          {
            value: 32,
            itemStyle: {
              color: "#B882FA",
            },
          },
          {
            value: 25,
            itemStyle: {
              color: "#02C2FC",
            },
          },
          {
            value: 36,
            itemStyle: {
              color: "#CC6BE7",
            },
          },
          {
            value: 30,
            itemStyle: {
              color: "#02C2FC",
            },
          },
          {
            value: 32,
            itemStyle: {
              color: "#B882FA",
            },
          },
          {
            value: 34,
            itemStyle: {
              color: "#F6B45E",
            },
          },
          {
            value: 25,
            itemStyle: {
              color: "#02FC61",
            },
          },
          {
            value: 20,
            itemStyle: {
              color: "#3B4EBC",
            },
          },
          {
            value: 40,
            itemStyle: {
              color: "#02C2FC",
            },
          },
        ],
        type: "bar",
      },
    ],
  });
});

//下面是右边的圆形图
onMounted(() => {
  var myChart = echarts.init(document.getElementById("bbx2") as HTMLElement);
  // 绘制图表
  myChart.setOption({
    title: {
      text: "产品销量统计",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "3%",
      left: "center",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["60%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "40",
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 2000, name: "家电类" },
          { value: 500, name: "小型家具" },
          { value: 500, name: "大型家具" },
        ],
      },
    ],
  });
});
</script>
